import { defineComponent, defineAsyncComponent, ref } from "vue";
import demoList from "@/components/demo";
import { useRoute, useRouter } from "vue-router";
import classes from "./demo-detail.module.scss";

/** 组件页面，输出组件demo */
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();

    /** 懒加载单个组件 */
    const generateCom = (id: string) => {
      const LazyCom = defineAsyncComponent(
        () => import(/* @vite-ignore */ `../../components/${id}/demo.tsx`)
      );
      return <LazyCom />;
    };

    let LazyCom = generateCom(route.query.id as string);

    /** 刷新详情页 */
    const refreshDetail = (id: string) => {
      router.push({
        path: "/detail",
        query: { id },
      });
      LazyCom = generateCom(id);
    };

    /** 渲染函数 */
    return () => (
      <div class={classes.container}>
        {/* 左侧组件列表 */}
        <div class={classes.left}>
          {demoList.map((item) => (
            <div
              class={[
                route.query.id === item.title && classes.checked,
                classes.box,
              ]}
              onClick={() => refreshDetail(item.title)}
            >
              <span class={classes.title}>{item.title}</span>
              <span>{item.subtitle}</span>
            </div>
          ))}
        </div>

        {/* 右侧组件实例 */}
        <div class={classes.right}>{LazyCom}</div>
      </div>
    );
  },
});
